<!--
 * @description: 描述内容
-->
<!--
 * @description: 描述内容
-->
<!--
 * @description: 描述内容
-->
<!--
 * @description: 描述内容
-->
<template>
    <button 
    ref="_ref"
    class="vk-button"
    :class="{
        [`vk-button--${type}`]:props.type,
        [`vk-button-${size}`]:props.size,
        'is-plain':props.plain,
        'is-round': props.round,
        'is-circle':props.circle,
        'is-disabled':props.disabled
    }"
    :disabled="props.disabled"
    :autofocus="props.autofocus"
    :type="props.nativeType"
    >
    <slot></slot>
    </button>
</template>

<script setup lang="ts">
import type { ButtonProps } from './types'
import { defineProps,ref } from 'vue'
defineOptions({
 name:'Hhbutton'
})
/**
 * 使用接口类型的泛型约束defineProps函数的参数,
 * 第二个参数应该表示的是默认值的含义
 */
const props= withDefaults(defineProps<ButtonProps>(),{
  nativeType:'button'
}) 
const _ref=ref<HTMLButtonElement>()

defineExpose({
  ref:_ref
})
</script>


<style scoped>

</style>